const signUpBtnLink = document.querySelector(".signUpBtn-link");
const signInBtnLink = document.querySelector(".signInBtn-link");
const forgotPasswordBtnLink = document.querySelector(".forgotPasswordBtn-link");
const forgotPasswordReturnLink = document.querySelector(".forgotPasswordReturn-link"); // 确保这是正确的选择器
const wrapper = document.querySelector(".wrapper");

// 定义一个函数来切换表单
function toggleForm(formName) {
    // 移除所有表单的激活状态
    document.querySelectorAll('.wrapper .form-wrapper').forEach(element => {
        element.classList.remove('active');
        element.style.transform = 'scale(0)'; // 重置transform
        element.style.opacity = '0'; // 重置opacity
    });

    // 移除wrapper的激活状态
    wrapper.classList.remove('active');

    // 根据点击的按钮，设置激活的表单
    const formToActivate = document.querySelector(`.form-wrapper.${formName}`);
    if (formToActivate) {
        formToActivate.style.transform = 'scale(1)'; // 显示表单
        formToActivate.style.opacity = '1'; // 显示表单
        formToActivate.classList.add('active');
        wrapper.classList.add('active'); // 给wrapper添加active类
    }
}

// 为按钮添加点击事件监听器
signUpBtnLink.addEventListener("click", () => {
    toggleForm('sign-up');
});

signInBtnLink.addEventListener("click", () => {
    toggleForm('sign-in');
});

forgotPasswordBtnLink.addEventListener("click", () => {
    toggleForm('forgot-password');
});

forgotPasswordReturnLink.addEventListener("click", () => {
  toggleForm('sign-in');
});